<template>
    <el-dialog :visible.sync="visible" title="提交入库审核" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
        <el-form-item label="入库数量" prop="inQuantity">
          <el-input v-model="dataForm.inQuantity" placeholder="入库数量"></el-input>
        </el-form-item>
        <el-form-item label="入库描述" prop="inDescription">
          <el-input type="textarea" v-model="dataForm.inDescription" placeholder="入库描述"></el-input>
        </el-form-item>
        <el-form-item label="入库图片" prop="inImgUrl">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="dataForm.inImgUrl" :src="dataForm.inImgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
      $t("confirm")
          }}</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import Cookies from 'js-cookie'
  import debounce from "lodash/debounce";
  export default {
    data() {
      return {
        uploadUrl: window.SITE_CONFIG['apiURL'] + '/piclocal/upload/pic',
        headers: { token: Cookies.get('token') },
        visible: false,
        dataForm: {
          productId: "",
          inQuantity: "",
          inDescription: "",
          status: 0,
          inImgUrl: ""
        },
      };
    },
    computed: {
      dataRule() {
        return {
          title: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
          description: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
          imgUrl: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
          price: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
          updater: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
          updateDate: [
            {
              required: true,
              message: this.$t("validate.required"),
              trigger: "blur",
            },
          ],
        };
      },
    },
    methods: {
      init() {
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
        });
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.dataForm.inImgUrl = res.data.imgAddress;
      },
      // 表单提交
      dataFormSubmitHandle: debounce(function () {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          this.$http[!this.dataForm.id ? 'post' : 'put']('/humanResources/inbound/', this.dataForm).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message({
              message: this.$t('prompt.success'),
              type: 'success',
              duration: 500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          }).catch(() => {})
        })
      }, 1000, { 'leading': true, 'trailing': false })
    },
  };
  </script>
  
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>